<template lang="pug">
  .permission
    .auth-form.tac(@keyup.enter="handleValidator")
      img(v-if='isShowGzh' :src='baseUrl+"krpano/images/pass_gzh.jpg"')
      p 请输入该作品访问密码
      el-input(v-model="password", type="password", maxlength="10", placeholder="请输入密码", ref="passwordInput" )
      el-button(type="primary", @click="handleValidator") 确 定
</template>

<script>
export default {
  name: 'Permission',
  data() {
    return {
      baseUrl: $globalconfig.URLS.API,
      passGzh: $globalconfig.PassGzh,
      loading: false,
      password: '',
      ovvId: '',
      panoId: '',
      redirectUrl: ''
    }
  },
  created() {
    this.ovvId = this.$route.query.ovv
    this.panoId = this.$route.query.id

    this.$store.dispatch('initData', {panoId: this.panoId, ovvId: this.$route.query.ovv})
  },
  mounted() {
    const panokey = this.$AUTH.getCookie('panokey')
    this.redirectUrl = '/panoview/' + this.panoId

    if(this.ovvId) {
      this.redirectUrl = '/panoview/' + this.panoId + '?ovv=' + this.ovvId
    }

    if(panokey) {
      // console.log(this.redirectUrl)
      this.$router.push(this.redirectUrl)
    }
  },
  methods: {
    handleValidator() {
      if(this.password != this.$store.getters.panoInfo.passkey) {
        this.$vgo.tip('密码错误！', 'error')
        this.clear()
        return
      }
      // 24小时有效
      let nonce = Math.random().toString(36).substr(2, 15)
      this.$AUTH.setCookie('panokey', nonce, 24 * 60)
      setTimeout(() => {
        this.$router.push(this.redirectUrl)
      }, 200)
    },
    clear() {
      this.password = ''
      this.$refs.passwordInput.focus()
      this.loading = false
    }
  },
  computed: {
    isShowGzh() {
      if(this.$store.getters.panoInfo) {
        let showgzh = this.passGzh && this.$store.getters.panoInfo.user_id == 10005
        return showgzh
      }
    }
  }
}
</script>

<style lang="stylus">
@import '../assets/styles/mixin.styl'
.permission
  full-cover()
  background-color: skyblue
  .auth-form
    pos-center()
    width: 300px
    height: 300px
    padding: 15px
    p
      color: #fff
      font-size: 18px
    .el-button
      margin: 15px 0 0
      width: 100%
    .el-input
      margin: 15px 0 0
    img
      height: 300px
      margin-bottom: 10px


</style>
